<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="assets/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/css/right.css" rel="stylesheet">
    <script src="assets/jquery-3.5.1.min.js"></script>
    <script src="assets/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="assets/vue.min-v2.5.16.js"></script>
    <script src="assets/vue-router.min-2.7.0.js"></script>
    <script src="assets/axios.min.js"></script>
    <script src="assets/date_picker.js"></script>
</head>
<body>
    <div id="app" class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="row">
                    <div class="col-md-12" style="text-align: center; font-weight: bold; font-size: 18px; height: 80px; line-height: 80px;">
                        {{title}}
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>户主姓名</label>
                        <select class="form-control" v-model="carcharge.ownerId" id="owner">
                            <option v-for="b in ownerlist" :value="b.id">{{b.username}}</option>
                        </select>
                    </div>
                </div>
                <div class="row" v-if="isParking">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>车位号码</label>
                        <select class="form-control" v-model="carcharge.parkId" id="parking">
                            <option v-for="b in parkinglist" :value="b.id">{{b.numbers}}</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>开始时间</label>
                        <br/>
                        <input type="datetime-local" class="form-control" v-model="carcharge.payDate"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>结束时间</label>
                        <br/>
                        <!--                        <input type="text" class="form-control" onclick="calendar(event)" v-model="house.intoDate">-->
                        <input type="date" class="form-control" v-model="carcharge.endDate"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>金额</label>
                        <input type="text" class="form-control" v-model="carcharge.money"/>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <label>状态</label>
                        <select class="form-control" v-model="carcharge.status">
                            <option value="0">未缴费</option>
                            <option value="1">已缴费</option>
                        </select>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6 col-md-offset-3" style="height: 80px;">
                        <button class="btn btn-primary" @click="doSave">保存</button>
                        <button class="btn btn-default" @click="doCancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>

        var _self;

        new Vue({
            el: '#app',
            data: {
                title: null,
                userId: null,
                carcharge:{
                    id:null,
                    payDate:null,
                    endDate:null,
                    money:null,
                    status:null,
                    ownerId:null,
                    remarks:null,
                    type:"停车费",
                    parkId: null
                },
                ownerlist:null,
                parkinglist:null,
                isParking:false
            },
            methods: {
                doSave(){
                    var uid = localStorage.getItem("uid");
                    if(this.userId != null){ //修改
                        var url='http://localhost:8080/carCharge/update?uid='+uid;
                        axios.post(url,this.carcharge).then(response =>{
                            alert(response.data.msg);
                            window.parent.main_right.location.href="carcharge_list.html";
                        });
                    } else { //保存
                        var url='http://localhost:8080/carCharge/insert?uid='+uid;
                        axios.post(url,this.carcharge).then(response =>{
                            alert(response.data.msg);
                            window.parent.main_right.location.href="carcharge_list.html";
                        });
                    }

                },
                doCancel(){
                   history.go(-1);
                },
                doChangeOwner(p){
                    var uid = localStorage.getItem("uid");
                    url='http://localhost:8080/parking/all?id='+p+'&uid='+uid;
                    // console.log(url);
                    axios.get(url).then(response =>{
                        if(response.data.code==200){
                            this.parkinglist=response.data.data;
                        }else{
                            alert('该户主无车位');
                            this.parkinglist=null;
                        }
                    });
                }
            },
            created: function () {
                _self=this;
                var uid = localStorage.getItem("uid");
                var url = window.location.href;
                if (url.indexOf('id') != -1) {
                    this.userId = url.substring(url.indexOf('=') + 1);
                }
                console.log("接收传参-用户ID：" + this.userId);

                if (this.userId != null) {
                    this.title = "修改房屋";
                    this.isParking = true;

                    var url = 'http://localhost:8080/owner/all?uid='+uid;
                    axios.get(url).then(response => {
                        if (response.data.code == 200) {
                            this.ownerlist = response.data.data;
                        } else {
                            alert(response.data.msg);
                        }
                    });

                    var url = 'http://localhost:8080/carCharge/selectOne?id=' + this.userId+'&uid='+uid;
                    axios.get(url).then(response => {
                        console.log(response.data);
                        this.carcharge = response.data.data;
                        this.doChangeOwner(this.carcharge.ownerId);
                    });

                } else {
                    this.title = "添加房屋";
                    this.isParking = false;
                    var url = 'http://localhost:8080/owner/all?uid='+uid;
                    axios.get(url).then(response => {
                        if (response.data.code == 200) {
                            this.ownerlist = response.data.data;
                        } else {
                            alert(response.data.msg);
                        }
                    });
                }

            }
        });
        window.onload=function (){
            $("#owner").change(function(){
                _self.isParking=true;
                var parking = $("#owner").val();
                // console.log(parking);
                _self.doChangeOwner(parking);
            });
        }
    </script>
</body>
</html>